<template>
    <div class="birds">
        <div class="birds_one">
            <!-- 公告类型 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown1">
                <span class="el-dropdown-link">
                    公告类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="infOne">
                            <el-dropdown-item v-for="item in information" :key="item.id">
                                <el-radio-group v-model="radio1.bulletin" class="ml-4">
                                    <el-radio :label="item.infoid" size="large">{{
                                        item.infoname }}</el-radio>
                                </el-radio-group>
                            </el-dropdown-item>
                        </div>
                        <div class="dropdownButtom">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize1">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 招标方式 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown2">
                <span class="el-dropdown-link">
                    招标方式<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="infOne">
                            <el-checkbox-group v-model="radio1.bidding" size="large">
                                <div class="infOne_hove" v-for="city in biddingMethod" :key="city.id">
                                    <el-checkbox :label="city">{{ city.name }}</el-checkbox>
                                </div>
                            </el-checkbox-group>
                        </div>
                        <div class="dropdownButtom">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize2">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 招标状态 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown4">
                <span class="el-dropdown-link">
                    招标状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="width: 100px;">
                        <div class="height" v-for="item in inviteBids" :key="item.id" :class="{ active: order == item.id }"
                            @click="tagsLietc(item)">{{ item.name
                            }}</div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 投标资质过滤 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown5">
                <span class="el-dropdown-link">
                    投标资质过滤<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="height: 450px;">
                        <div class="flexible">
                            <div>
                                <div class="search_sousou">
                                    <el-input v-model="radio1.sousou" placeholder="请输入资质关键词搜索" class="input-with-select">
                                        <template #append>
                                            <el-button :icon="Search" @click="certificates" />
                                        </template>
                                    </el-input>
                                </div>
                                <p style="margin-left: 21px; font-size: 13px;">
                                    为你找到相关资质<span style="color: #6675FF;">{{ cities.length }}</span>个</p>
                                <div class="flexible_box">
                                    <el-checkbox-group v-model="checkedCities">
                                        <div v-for="city in cities" :key="city">
                                            <el-checkbox :label="city">{{
                                                city
                                            }}</el-checkbox>
                                        </div>

                                    </el-checkbox-group>
                                </div>
                            </div>
                            <div class="flexible_right">
                                <div style="padding: 22px 0 0 22px; font-size: 14px;">已选资质<span style="color: #6675FF;">{{
                                    checkedCities.length
                                }}/<span>20</span></span>
                                </div>
                                <div class="flexible_bo2">
                                    <el-checkbox-group v-model="radio1.checkedCities">
                                        <div v-for="city in checkedCities" :key="city">
                                            <el-checkbox checked :label="city">{{
                                                city
                                            }}</el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                </div>
                                <div class="" style="padding: 15px 22px;">
                                    <div>筛选需求</div>
                                    <el-radio-group v-model="radio1.radio">
                                        <div style="display: flex; flex-direction: column;">
                                            <div><el-radio :label="1">包含所选资质</el-radio></div>
                                            <div><el-radio :label="2">过滤所选资质</el-radio></div>
                                        </div>
                                    </el-radio-group>

                                </div>
                            </div>
                        </div>

                        <div class="dropdownButtoms">
                            <div style="color: #ff8a35;">该条件仅适用于招标类公告</div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize5">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 地区项目 -->
            <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown6">
                <span class="el-dropdown-link">
                    地区项目 <img style="color: #6675FF; width: 14px;" src="@/assets/img/jt.png" alt="">
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-cascader-panel :options="options" @change="handleChange" />
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!-- 采购时间 -->
            <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown7">
                <span class="el-dropdown-link">
                    采购时间 <img style="color: #6675FF; width: 14px;" src="@/assets/img/jt.png" alt="">
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="block">
                            <el-date-picker v-model="radio1.times" type="daterange" format="YYYY/MM/DD"
                                :disabled-date="disabledDate" unlink-panels range-separator="To"
                                start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts"
                                :size="size" @change="recognize7" />
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!-- 招标公司类型 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown3">
                <span class="el-dropdown-link">
                    招标公司类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="infOne">
                            <el-checkbox-group v-model="radio1.Boos" size="large">
                                <div class="infOne_hove" v-for="city in biddingBoos" :key="city.id">
                                    <el-checkbox :label="city">{{ city.name }}</el-checkbox>
                                </div>
                            </el-checkbox-group>
                        </div>
                        <div class="dropdownButtom">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize3">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 搜索范围 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown12">
                <span class="el-dropdown-link">
                    搜索范围<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="infOne">
                            <el-checkbox-group v-model="radio1.checkList">
                                <div class="infOne_hove" v-for="city in realm" :key="city.id">
                                    <el-checkbox :label="city" :disabled="city.disabled == 'disabled' ? true : false">{{
                                        city.name
                                    }}</el-checkbox>
                                    <div style=" margin-left: 5px;" v-if="city.id == '6'">
                                        <el-icon :size="20">
                                            <QuestionFilled />
                                        </el-icon>
                                    </div>
                                </div>
                            </el-checkbox-group>
                        </div>
                        <div class="dropdownButtom">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize12">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 联系方式 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown8">
                <span class="el-dropdown-link">
                    联系方式<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="width: 150px;">
                        <div class="height" v-for="item in photoBids" :key="item.id" :class="{ active: photo == item.id }"
                            @click="photoLietc(item)">{{ item.name
                            }}</div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 金额区间 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown9">
                <span class="el-dropdown-link">
                    金额区间<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="width: 240px;">
                        <div class="height" v-for="item in moneyBids" :key="item.id" :class="{ active: money == item.id }"
                            @click="moneyLietc(item)">{{ item.name
                            }}</div>

                        <div style="display: flex; margin-top: 10px;" v-if="money == '9'">
                            <div class="search_money">
                                <input class="search_mput" type="text" v-model="radio1.max" placeholder="最小值">
                                <span style="margin-right: 10px;">至</span>
                                <input class="search_mput" type="text" v-model="radio1.min" placeholder="最大值">
                            </div>
                            万元
                        </div>
                        <div class="dropdownButtom" style="width: 240px; padding-top: 5px; border-top: 1px solid #e8e8e8;"
                            v-if="money == '9'">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize9">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 采购类别 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown10">
                <span class="el-dropdown-link">
                    采购类别<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="infOne">
                            <el-checkbox-group v-model="radio1.projects" size="large">
                                <div class="infOne_hove" v-for="city in category" :key="city.id">
                                    <el-checkbox :label="city">{{ city.name }}</el-checkbox>
                                </div>
                            </el-checkbox-group>
                        </div>
                        <div class="dropdownButtom">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize10">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 所属行业 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown11">
                <span class="el-dropdown-link">
                    所属行业<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="infOne">
                            <el-dropdown-item v-for="item in industry" :key="item">
                                <el-radio-group v-model="radio1.belong" class="ml-4">
                                    <el-radio :label="item" size="large">{{
                                        item }}</el-radio>
                                </el-radio-group>
                            </el-dropdown-item>
                        </div>
                        <div class="dropdownButtom">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize11">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
        </div>
        <div class="birds_two">
            <!-- 品配模式 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown13">
                <span class="el-dropdown-link">
                    品配模式<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="width: 100px;">
                        <div class="height" v-for="item in quality" :key="item.id" :class="{ active: grade == item.id }"
                            @click="gradeLietc(item)">{{ item.name
                            }}</div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 同时包含关键词 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown14">
                <span class="el-dropdown-link">
                    同时包含关键词<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="width: 758px;">
                        <div style="padding: 8px 15px 24px; font-size: 14px;">
                            <p>同时包含关键词</p>
                            <el-input style="width: 440px;" v-model="radio1.keywords"
                                placeholder="请输入关键字，多个关键字用空格隔开 如：面包 牛奶 鸡蛋" />
                            <p style="margin-top: 15px;">同时包含关键词位置</p>
                            <el-checkbox-group v-model="radio1.keyList">
                                <el-checkbox v-for="city in byword" :key="city" :label="city"
                                    :disabled="city.disabled == 'disabled' ? true : false">{{ city.name }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="dropdownButtomCi">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize14">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 排除词 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown15">
                <span class="el-dropdown-link">
                    排除词<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="width: 758px;">
                        <div style="padding: 8px 15px 24px; font-size: 14px;">
                            <p>排除词</p>
                            <el-input style="width: 440px;" v-model="radio1.excluded"
                                placeholder="请输入关键字，标讯信息中含有关键词的不会出现在搜索结果中" />
                            <p style="margin-top: 15px;">排除词位置</p>
                            <el-checkbox-group v-model="radio1.excludedList">
                                <el-checkbox v-for="city in byword" :key="city" :label="city"
                                    :disabled="city.disabled == 'disabled' ? true : false">{{ city.name }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="dropdownButtomCi">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px;">重置</a-button>
                                <a-button style="background-color: #6675FF; color: #fff;" @click="recognize15">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <!-- 附件 -->
            <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown16">
                <span class="el-dropdown-link">
                    附件<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu style="width: 100px;">
                        <div class="height" v-for="item in attachment" :key="item.id" :class="{ active: attach == item.id }"
                            @click="attachmentLietc(item)">{{
                                item.name
                            }}</div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
        </div>
    </div>
</template>

<script setup>
import jsonData from '@/utils/json/index.json'
import domData from '@/utils/json/dom'
// import { getCaricatureApi } from '@/Api/shoop/index.js'
import { onMounted, ref, watch } from 'vue';
import { useSearchStore } from '@/pain/search/search';
const disabledDate = (time) => {
    return time.getTime() > Date.now()
}
const store = useSearchStore()
let prerequisite = ref([])

const radio1 = ref({
    // bulletin: '',//公告
    // bidding: [],//招标方式
    // Boos: [], //招标公司类型
    // affairs: '', //招标状态
    // sousou: '', //投标资质过滤
    checkedCities: [], //投标资质过滤选中的
    // radio: 1, //筛选要求
    times: '',//日期
    // 
    leave: '',//省
    market: '',//市
    quarter: '', //区
    // contact: '',// 联系方式 
    // money: '',//金额区间
    // max: '',//自定义 - 最大金额
    // min: '',//自定义 - 最小金额
    // projects: [], // 采购类别
    // belong: '',//所属行业
    // annexes: '', // 附件
    checkList: [],// 搜索范围
    // matching: '',//品配模式 
    // keywords: '', //关键字
    // keyList: [],// 选中关键字
    // excluded: '', //排除词
    // excludedList: []//选中排除词
});

// 公告类型
// let information = ref({})
// const getInformation = () => {
//     getCaricatureApi().then(res => {
//         let { data: { data } } = res
//         information.value = data
//         console.log(data)
//     })
// }
// 确定取消下拉框
// const dropdown1 = ref()
// let drop1 = ref([])
// const recognize1 = () => {
//     console.log(radio1.value.bulletin)
//     dropdown1.value.handleClose()
//     let names = information.value.filter(item => item.infoid == radio1.value.bulletin)
//     if (radio1.value.bulletin != '') {
//         drop1.value = [
//             {
//                 name: '公告类型：',
//                 value: [{
//                     name: names[0].infoname
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value]
//     }
//     console.log(...drop1.value)
// }

// 招标方式
// let biddingMethod = ref([
//     {
//         id: '1',
//         name: '公开招标'
//     },
//     {
//         id: '2',
//         name: '询比价'
//     },
//     {
//         id: '3',
//         name: '竞价'
//     },
//     {
//         id: '4',
//         name: '竞争性磋商'
//     },
//     {
//         id: '5',
//         name: '竞争性谈判'
//     },
//     {
//         id: '6',
//         name: '邀请招标'
//     },
//     {
//         id: '7',
//         name: '单一来源'
//     },
//     {
//         id: '8',
//         name: '网上直购'
//     },
//     {
//         id: '9',
//         name: '定单采购'
//     },
//     {
//         id: '10',
//         name: '公开寻源'
//     },
// ])
// 确定取消下拉框
// const dropdown2 = ref()
// let drop2 = ref([])
// const recognize2 = () => {
//     // console.log(radio1.value.bidding)
//     dropdown2.value.handleClose()
//     console.log(Array.isArray())
//     if (radio1.value.bidding.length > 0) {
//         drop2.value = [
//             {
//                 name: '招标方式：',
//                 value: radio1.value.bidding
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value]
//     }
//     console.log(prerequisite)
// }

// 招标公司类型 
// let biddingBoos = ref([
//     {
//         id: '1',
//         name: '国有企业'
//     },
//     {
//         id: '2',
//         name: '通讯运营商'
//     },
//     {
//         id: '3',
//         name: '军队'
//     },
//     {
//         id: '4',
//         name: '银行'
//     },
//     {
//         id: '5',
//         name: '证券'
//     },
//     {
//         id: '6',
//         name: '保险'
//     },
//     {
//         id: '7',
//         name: '民营企业'
//     },
//     {
//         id: '8',
//         name: '医院'
//     },
//     {
//         id: '9',
//         name: '政府及事业单位'
//     },
//     {
//         id: '10',
//         name: '学校'
//     },
//     {
//         id: '11',
//         name: '其他'
//     }
// ])
// 确定取消下拉框
// const dropdown3 = ref()
// let drop3 = ref([])
// const recognize3 = () => {
//     console.log(radio1.value.Boos)
//     dropdown3.value.handleClose()
//     if (radio1.value.Boos.length > 0) {
//         drop3.value = [
//             {
//                 name: '招标公司类型：',
//                 value: radio1.value.Boos
//             }
//         ]
//         // prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value]
//         prerequisite.value = [...drop3.value]
//     }
//     console.log(prerequisite)
// }


// 招标状态
// let order = ref('')
// let orderIndex = ref('')
// let inviteBids = [
//     {
//         id: '1',
//         name: '全部招标'
//     },
//     {
//         id: '2',
//         name: '标书获取中'
//     }, {
//         id: '3',
//         name: '投标中'
//     }, {
//         id: '4',
//         name: '投标已截止'
//     },
//     {
//         id: '5',
//         name: '其他'
//     },
// ]

// const dropdown4 = ref()
// 确定取消下拉框 高亮
// const tagsLietc = (item) => {
//     console.log('招标状态', item)
//     radio1.value.affairs = item.name
//     orderIndex.value = item.id
//     order.value = item.id

//     console.log('12',radio1.value.affairs)
//     dropdown4.value.handleClose()
//     if (radio1.value.affairs != '') {
//         prerequisite.value.push({
//             name: '招标状态',
//             value: [
//                 {
//                     name:radio1.value.affairs
//                 }
//             ]
//         })
//     }
//     console.log(prerequisite)
// }


// 投标资质过滤
// const checkedCities = ref([])
// const cities = ref([])
// const certificates = () => {
//     jsonData.filter((item) => {
//         if (item.includes(radio1.value.sousou)) {
//             cities.value.push(item)
//         }
//     })
// }
// 确定取消下拉框
// const dropdown5 = ref()
// let drop5 = ref([])
// const recognize5 = () => {
//     console.log(radio1.value.Boos)
//     dropdown5.value.handleClose()
//     if (radio1.value.checkedCities.length > 0) {
//         drop5.value = [
//             {
//                 name: '投标资质过滤：',
//                 value: [{
//                     name: radio1.value.checkedCities.length
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value]
//     }
//     console.log(prerequisite)
// }

// 地区
let options = []
let children2 = ref([])
let children3 = ref([])
options = domData.filter(item => item.parent === 100000)
domData.forEach(item => {
    Reflect.set(item, 'value', item.label)
})
options.forEach(element => {
    children2 = domData.filter(word => element.adcode == word.parent);
    Reflect.set(element, 'children', children2)
    children2.forEach(ele => {
        children3 = domData.filter(word => ele.adcode == word.parent);
        Reflect.set(ele, 'children', children3)
    })
})
const dropdown6 = ref()
let drop6 = ref([])
const handleChange = (valie) => {
    let q1 = domData.filter(item => item.label === valie[0])
    let q2 = domData.filter(item => item.label === valie[1])
    let q3 = domData.filter(item => item.label === valie[2])
    radio1.value.leave = q1[0]?.adcode
    radio1.value.market = q2[0]?.adcode
    radio1.value.quarter = q3[0]?.adcode
    console.log(valie)
    dropdown6.value.handleClose()
    console.log('32132',radio1.value.checkedCities)

    if (valie.length >0) {
        drop6.value = [
            {
                name: '地区：',
                value: [{
                    name: valie
                }]
            }
        ]
        // prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value]
        prerequisite.value = [...drop6.value]
    }
    console.log(prerequisite)
}

// 发布时间
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

const recognize7 = (value) => {
    console.log(radio1.value.times)
    console.log(value)

}
// 联系方式
// let photo = ref('')
// let photoIndex = ref('')
// let photoBids = [
//     {
//         id: '1',
//         name: '全部'
//     },
//     {
//         id: '2',
//         name: '有招标联系方式'
//     }, {
//         id: '3',
//         name: '有中标联系方式'
//     }, {
//         id: '4',
//         name: '有代理联系方式'
//     },
//     {
//         id: '5',
//         name: '有联系方式'
//     },
// ]
// const dropdown8 = ref()
// let drop8 = ref([])
// const photoLietc = (item) => {
//     console.log('联系方式', item)
//     radio1.value.contact = item.id
//     photo.value = item.id
//     photoIndex.value = item.id
//     dropdown8.value.handleClose()
//     if (radio1.value.contact != '') {
//         drop8.value = [
//             {
//                 name: '联系方式：',
//                 value: [{
//                     name: item.name
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value]
//     }
// }


// 金额区间
// let money = ref('')
// let moneyIndex = ref('')
// let moneyBids = [
//     {
//         id: '1',
//         name: '全部'
//     },
//     {
//         id: '2',
//         name: '0~10万'
//     }, {
//         id: '3',
//         name: '10~20万'
//     }, {
//         id: '4',
//         name: '20~50万'
//     },
//     {
//         id: '5',
//         name: '50~100万'
//     },
//     {
//         id: '6',
//         name: '100~200万'
//     },
//     {
//         id: '7',
//         name: '200~500万'
//     },
//     {
//         id: '8',
//         name: '500~1000万'
//     },
//     {
//         id: '9',
//         name: '自定义'
//     },
// ]
// const dropdown9 = ref()
// let moneyName = ref('')
// let drop9 = ref([])
// const moneyLietc = (item) => {
//     console.log('金额', item)
//     moneyName.value = item.name
//     radio1.value.money = item.id
//     money.value = item.id
//     moneyIndex.value = item.id
//     if (item.id != '9') {
//         if (radio1.value.money != '') {
//             drop9.value = [
//                 {
//                     name: '金额：',
//                     value: [{
//                         name: item.name
//                     }]
//                 }
//             ]


//         }
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value]
//         dropdown9.value.handleClose()
//     }
// }
// const recognize9 = () => {
//     if (radio1.value.max != '' && radio1.value.min != '') {
//         drop9.value = [
//             {
//                 name: '金额：',
//                 value: [{
//                     name: moneyName.value
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value]
//         dropdown9.value.handleClose()
//     }
// }

// 采购类别
// let category = ref([
//     {
//         id: '1',
//         name: '工程施工'
//     },
//     {
//         id: '2',
//         name: '环保绿化'
//     },
//     {
//         id: '3',
//         name: '修缮装修'
//     },
//     {
//         id: '4',
//         name: '水利工程'
//     },
//     {
//         id: '5',
//         name: '勘察设计监理'
//     },
//     {
//         id: '6',
//         name: '宣传印刷'
//     },
//     {
//         id: '7',
//         name: '物业管理'
//     },
//     {
//         id: '8',
//         name: '咨询服务'
//     },
//     {
//         id: '9',
//         name: '课程培训'
//     },
//     {
//         id: '10',
//         name: '食品饮品'
//     },
//     {
//         id: '11',
//         name: '服装纺织'
//     },
//     {
//         id: '12',
//         name: '生活用品'
//     },
//     {
//         id: '13',
//         name: '信息技术'
//     },
//     {
//         id: '14',
//         name: '电子电器'
//     },
//     {
//         id: '15',
//         name: '办公文教'
//     },
//     {
//         id: '16',
//         name: '办公家具'
//     },
//     {
//         id: '17',
//         name: '医疗耗材'
//     },
//     {
//         id: '18',
//         name: '医疗器械'
//     },
//     {
//         id: '19',
//         name: '生物医药'
//     },
//     {
//         id: '20',
//         name: '农林牧渔'
//     },
//     {
//         id: '21',
//         name: '机械设备'
//     },
//     {
//         id: '22',
//         name: '机械零部件'
//     },
//     {
//         id: '23',
//         name: '能源电力'
//     },
//     {
//         id: '24',
//         name: '能源电力'
//     },
//     {
//         id: '25',
//         name: '五金工具'
//     },
//     {
//         id: '26',
//         name: '仪器仪表'
//     },
//     {
//         id: '27',
//         name: '维护维修'
//     },
//     {
//         id: '28',
//         name: '商业租赁'
//     },
//     {
//         id: '29',
//         name: '交通运输'
//     },
//     {
//         id: '30',
//         name: '展会演出'
//     },
//     {
//         id: '31',
//         name: '中介代理'
//     },
//     {
//         id: '32',
//         name: '课程培训'
//     },
//     {
//         id: '33',
//         name: '会计审计'
//     },
//     {
//         id: '34',
//         name: '金融'
//     },
//     {
//         id: '35',
//         name: '保险'
//     },
//     {
//         id: '36',
//         name: '劳务外包'
//     },
//     {
//         id: '37',
//         name: '健康服务'
//     },
//     {
//         id: '38',
//         name: '消防安全'
//     },
//     {
//         id: '39',
//         name: '废旧处理'
//     },
//     {
//         id: '40',
//         name: '建筑建材'
//     },
//     {
//         id: '41',
//         name: '冶练化工'
//     },
//     {
//         id: '42',
//         name: '其他'
//     },

// ])
// const dropdown10 = ref()
// let drop10 = ref([])
// const recognize10 = () => {
//     console.log(radio1.value.projects)
//     dropdown10.value.handleClose()
//     if (radio1.value.projects.length > 0) {
//         drop10.value = [
//             {
//                 name: '采购类别：',
//                 value: [{
//                     name: radio1.value.projects
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value]
//     }
//     console.log(prerequisite)
// }


// 所属行业
// let industry = ref([
//     "房屋建筑",
//     "市政服务",
//     "信息电子",
//     "科教文卫",
//     "公路交通",
//     "生物医药",
//     "光电通信",
//     "铁路桥梁",
//     "安全防护",
//     "礼品首饰",
//     "港口航道",
//     "纺织轻工",
//     "商业服务",
//     "石油石化",
//     "园林绿化",
//     "生态环保",
//     "机械设备",
//     "农林渔牧",
//     "化学工学",
//     "消防安全",
//     "水利水电",
//     "金属矿产",
//     "酒店服务",
//     "管道工程"
// ])
// const dropdown11 = ref()
// let drop11 = ref([])
// const recognize11 = () => {
//     console.log(radio1.value.belong)
//     dropdown11.value.handleClose()
//     if (radio1.value.belong != '') {
//         drop11.value = [
//             {
//                 name: '所属行业：',
//                 value: [{
//                     name: radio1.value.belong
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value]
//     }
//     console.log(prerequisite)
// }


// 附件 
// let attach = ref('')
// let attachIndex = ref('')
// let attachment = [
//     {
//         id: '1',
//         name: '全部'
//     },
//     {
//         id: '2',
//         name: '有附件'
//     }
// ]
// const dropdown16 = ref()
// let drop16 = ref([])
// const attachmentLietc = (item) => {
//     console.log('附件', item)
//     radio1.value.annexes = item.id
//     attach.value = item.id
//     attachIndex.value = item.id
//     dropdown8.value.handleClose()
//     if (radio1.value.annexes != '') {
//         drop16.value = [
//             {
//                 name: '附件：',
//                 value: [{
//                     name: item.name
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value, ...drop16.value]
//     }
//     console.log(prerequisite)
// }

// 搜索范围
// const realm = ref([
//     {
//         id: '1',
//         name: '产品'
//     },
//     {
//         id: '2',
//         name: '标题'
//     },
//     // {
//     //     id: '3',
//     //     name: '品牌',
//     //     disabled: "disabled"
//     // },
//     {
//         id: '4',
//         name: '招标公司'
//     },
//     {
//         id: '5',
//         name: '中标公司'
//     },
//     {
//         id: '6',
//         name: '代理公司'
//     },
//     {
//         id: '7',
//         name: '全文'
//     },
// ])
// const dropdown12 = ref()
// let drop12 = ref([])
// const recognize12 = () => {
//     console.log(radio1.value.checkList)
//     dropdown12.value.handleClose()
//     if (radio1.value.checkList.length > 0) {
//         drop12.value = [
//             {
//                 name: '搜索范围：',
//                 value:radio1.value.checkList
//             }
//         ]
//         // prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value, ...drop16.value, ...drop12.value]
//         prerequisite.value = [...drop6.value, ...drop12.value]
//     }
//     console.log(prerequisite)
// }



//  品配模式
// let grade = ref('')
// let gradeIndex = ref('')
// let quality = [
//     {
//         id: '1',
//         name: '智能品配'
//     },
//     {
//         id: '2',
//         name: '精准品配'
//     },
//     {
//         id: '3',
//         name: '模糊品配'
//     }
// ]
// const dropdown13 = ref()
// let drop13 = ref([])
// const gradeLietc = (item) => {
//     console.log('品配模式', item)
//     radio1.value.matching = item.id
//     grade.value = item.id
//     gradeIndex.value = item.id
//     dropdown13.value.handleClose()
//     if (radio1.value.matching != '') {
//         drop13.value = [
//             {
//                 name: '品配模式：',
//                 value: [{
//                     name: item.name
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value, ...drop16.value, ...drop12.value, ...drop13.value]
//     }
//     console.log(prerequisite)
// }



// 同时包含关键词
// const byword = ref([
//     {
//         id: '1',
//         name: '产品'
//     },
//     {
//         id: '2',
//         name: '标题'
//     },
//     {
//         id: '3',
//         name: '品牌',
//         disabled: "disabled"
//     },
//     {
//         id: '4',
//         name: '招标公司'
//     },
//     {
//         id: '5',
//         name: '中标公司'
//     },
//     {
//         id: '6',
//         name: '投标公司'
//     },
//     {
//         id: '7',
//         name: '全文',
//         disabled: "disabled"
//     },
// ])
// const dropdown14 = ref()
// let drop14_top = ref([])
// let drop14_btn = ref([])
// const recognize14 = () => {
//     console.log(radio1.value.checkList)
//     dropdown14.value.handleClose()

//     if (radio1.value.keywords != '') {
//         drop14_top.value = [
//             {
//                 name: '同时包含关键词：',
//                 value: [{
//                     name: radio1.value.keywords
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value, ...drop16.value, ...drop12.value, ...drop13.value, ...drop14_top.value]
//     }
//     if (radio1.value.keyList.length > 0) {
//         drop14_btn.value = [
//             {
//                 name: '同时包含关键词范围：',
//                 value: radio1.value.keyList
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value, ...drop16.value, ...drop12.value, ...drop13.value, ...drop14_top.value, ...drop14_btn.value]
//     }
//     console.log(prerequisite)
// }

// 排除词
// const dropdown15 = ref()
// let drop15_top = ref([])
// let drop15_btn = ref([])
// const recognize15 = () => {
//     console.log(radio1.value.checkList)
//     dropdown15.value.handleClose()
//     if (radio1.value.excluded != '') {
//         drop15_top.value = [
//             {
//                 name: '同时包含排除词:',
//                 value: [{
//                     name: radio1.value.excluded
//                 }]
//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value, ...drop16.value, ...drop12.value, ...drop13.value, ...drop14_top.value, ...drop14_btn.value, ...drop15_top.value]
//     }
//     if (radio1.value.excludedList.length > 0) {
//         drop15_btn.value = [
//             {
//                 name: '同时包含排除词范围:',
//                 value: radio1.value.excludedList

//             }
//         ]
//         prerequisite.value = [...drop1.value, ...drop2.value, ...drop3.value, ...drop5.value, ...drop6.value, ...drop8.value, ...drop9.value, ...drop10.value, ...drop11.value, ...drop16.value, ...drop12.value, ...drop13.value, ...drop14_top.value, ...drop14_btn.value, ...drop15_top.value, ...drop15_btn.value]
//     }
//     console.log(prerequisite)
// }

watch(prerequisite, (newData, oldData) => {
    store.count = newData
    console.log('watch', store.count)
}, { immediate: true, deep: true })

onMounted(() => {
    // getInformation()
});
defineExpose({ radio1 })
</script>

<style lang="scss" scoped>
.height {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
}

.active {
    background-color: #6675FF;
    color: #F6F6F6;
}

.search_input {
    display: flex;
    flex-direction: column;
    margin-left: 175px;

    .search_s {
        position: relative;

        .search_ss {
            // display: flex;
            width: 850px;
            height: 60px;
            margin-top: 50px;
            border-radius: 50px;
            border: 1px solid #F6F6F6;

        }

        .search_buttons {
            position: absolute;
            top: 52px;
            right: 178px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 56px;
            background-color: #6675FF;
            border-radius: 50px;
            font-size: 22px;
            color: #fff;
        }
    }

    .popular_box {
        margin-top: 20px;
        color: #FFFFFF;
    }

    .popular {
        margin: 0 15px;

    }
}

.flexible {
    display: flex;

    .flexible_box {
        width: 300px;
        height: 300px;
        padding-left: 21px;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .flexible_bo2 {
        height: 247px;
        padding-left: 21px;
        overflow-x: hidden;
        overflow-y: scroll;
        border-bottom: 1px solid #e8e8e8;
    }

    .flexible_right {
        // width: 228px;
        flex: 1;
        border-left: 1px solid #e8e8e8;
    }
}

.dropdownButtom {
    width: 200px;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
}

.dropdownButtomCi {
    width: 758px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid #e8e8e8;
}

.dropdownButtoms {
    width: 560px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid #e8e8e8;
}

.infOne {
    height: 300px;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: scroll;

    .infOne_hove {
        display: flex;
        height: 40px;
        align-items: center;
        padding-left: 16px;

        &:hover {
            // background-color: #6675FF;
        }
    }
}

.inputDeep>>>.el-input__inner {
    border: 0;
}


::-webkit-scrollbar {
    display: none;
}

.search_money {
    display: flex;
    align-items: center;
    width: 150px;
    padding-left: 10px;
    margin: 0 5px;
    border-radius: 5px;
    border: 1px solid #9a9898;

    .search_mput {
        width: 50px;
        border: 0;
        outline: none;
    }


}

.search_sousou {
    display: flex;
    width: 260px;
    height: 30px;
    margin: 15px 21px 9px;
}

.birds {
    display: flex;
    flex-direction: column;
    padding: 10px 0;

    .birds_one {
        display: flex;

        .el-dropdown {
            margin-right: 25px;
        }
    }

    .birds_two {
        display: flex;

        .el-dropdown {
            margin-top: 15px;
            margin-right: 25px;
        }
    }
}

.el-checkbox__label {
    font-size: 16px;
}
</style>